<template>
            <div class="threeD-ranking">
                <img src="@/assets/images/3D-title.png" alt="" />
              <div class="threeD-list">
            <div class="threeD-list-item" v-for="item in wikiRanking" :key="item">
              <div class="threeD-list-item-data">
                <div class="threeD-list-item-data-name">{{item.name}}</div>
                <div class="threeD-list-item-data-total">
                  <span class="threeD-list-item-data-total-value">{{item.total}}</span>
                  人次
                </div>
              </div>
              <el-progress :percentage="item.percentage*100" color="rgb(24, 254, 240)" />
            </div>
            
          </div>
        </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted,ref } from 'vue';
import {getWikiranking} from "@/api/api.js";

const wikiRanking = ref()

onMounted(()=>{
  getWikiranking().then((res)=>{
    wikiRanking.value = res.data
  })
})


</script>

<style lang="scss" scoped>
  .threeD-ranking {
    display: flex;
    flex-direction: column;
    width: 48.62%;
    height: 100%;
    background: url("@/assets/images/3D-bg.png");
    background-size: 100% 100%;
    // background-color: rgba(20, 30, 43, 0.63);
    backdrop-filter: blur(5px); /* 创建毛玻璃效果 */
    > img {
      width: 100%;
    }
    .demo-progress .el-progress--line {
      margin-bottom: 15px;
      width: 350px;
    }
    ::v-deep .el-progress__text {
      display: none;
    }
    ::v-deep .el-progress-bar__outer {
      margin-top: 3.45%;
      background-color: rgba(128, 136, 142, 0.4);
    }
    .threeD-list {
      box-sizing: border-box;
      width: 100%;
      height: 86.16%;
      padding: 0 4.4%;
      padding-bottom: 4.4%;
      &-item {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        width: 100%;
        height: 20%;
        &-data {
          display: flex;
          justify-content: space-between;
          align-items: end;
          width: 100%;
          &-name {
            color: rgb(255, 255, 255);
            font-family: SiYuanHeiTi-CN;
            font-size: 16px;
            font-weight: 400;
          }
          &-total {
            color: rgb(255, 255, 255);
            font-family: SiYuanHeiTi-CN;
            font-size: 10px;
            font-weight: 400;
            &-value {
              color: rgb(255, 255, 255);
              font-family: DIN;
              font-size: 24px;
              font-weight: 700;
            }
          }
        }
      }
    }
  }</style>